import { Plugin } from "../../core/interface";

import SwitchTheme, { SwitchThemeProps } from "./SwitchTheme";
import SwitchThemeButton from "./SwitchThemeButton";
import SwitchThemeMenuItem, {
  SwitchThemeMenuItemProps,
} from "./SwitchThemeMenuItem";
import { ReactElement } from "react";

interface ThemePlugin extends Plugin {
  SwitchTheme: (props: SwitchThemeProps) => ReactElement;
  SwitchThemeButton: () => ReactElement;
  SwitchThemeMenuItem: (props: SwitchThemeMenuItemProps) => ReactElement;
}

const themePlugin = (): ThemePlugin => {
  const SwitchThemeDecorator = (props: SwitchThemeProps) => (
    <SwitchTheme {...props} />
  );

  const SwitchThemeButtonDecorator = () => (
    <SwitchThemeDecorator>
      {(props) => <SwitchThemeButton {...props} />}
    </SwitchThemeDecorator>
  );

  const SwitchThemeMenuItemDecorator = (props: SwitchThemeMenuItemProps) => (
    <SwitchThemeDecorator>
      {(p) => (
        <SwitchThemeMenuItem
          onClick={() => {
            p.onClick();
            props.onClick();
          }}
        />
      )}
    </SwitchThemeDecorator>
  );

  return {
    SwitchTheme: SwitchThemeDecorator,
    SwitchThemeButton: SwitchThemeButtonDecorator,
    SwitchThemeMenuItem: SwitchThemeMenuItemDecorator,
  };
};

export default themePlugin;
